<template>
  <div>
    <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            >
        <el-row style="text-align: center">
            <el-col>
              <el-form-item label="手机号码" prop="phone" style="width:100%;">
                  <el-input v-model.number="ruleForm.phone" id="butinput"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="验证码" prop="Captcha" style="width:100%;">
                  <el-input v-model.number="ruleForm.Captcha">
                      <el-button
                              slot="append"
                              type="primary"
                              @click="butclick(ruleForm.phone)"
                              id="but"
                              v-bind:disabled="disabled">
                          发送验证码<span v-if="time != 60">{{time}}</span>
                      </el-button>
                  </el-input>

              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item class="item">
                  <el-button type="primary" @click="submitForm('ruleForm')" style="width: 80%">登录/注册</el-button>
              </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-button :plain="true" @click="open2()" Style="display:none">成功</el-button>
  </div>
</template>
<script>
import users from "@/api/users";
  export default {
    props:['msg'],
    data() {
      return {
        disabled:false,
        time:60,
        yan:'',
        ruleForm: {
          phone: '',
          Captcha:'',
          authority:this.msg
        },
        rules: {
          phone: [
            { required: true, message: '手机号不能为空',trigger: 'blur'},
            {message: '手机号填写错误',trigger: 'blur',pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/}
          ],
          Captcha:[
              { required: true, message: '验证码不能为空',trigger: 'blur'},
          ]
        }
      };
    },
    methods: {
      open2() {
        this.$message({
          message: '登录成功',
          type: 'success'
        });
      },
      submitForm(formName) {
        var _this=this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
           if(_this.yan==_this.ruleForm.Captcha){
             users.login(this.ruleForm.phone).then(function(response){
              if(response.data.data!=null){
                let user = response.data.data;
                // user.phone = user.phone.substring(0,3)+'****'+user.phone.substring(7,11)
                _this.resetSetItem("users",JSON.stringify(user));
                _this.open2();
                _this.$emit('close',false);
              }
             })
           }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      butclick(phone){
        var _this=this;
        this.time=60;
        var zhengze=/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
        if(zhengze.test(phone)){
          _this.mounted();
          this.disabled=true;
          users.sendMsm(phone).then(function(response){
            // console.log(response.data.data)
            _this.yan = response.data.data;
            // console.log(_this.yan);
          })
        }else{
          alert("请输入手机号");
        }
        },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      mounted(){
          //在mounted 声明周期中创建定时器
          const timer = setInterval(()=>{
            // 这里调用需要执行的方法
            if(this.time>0){
              this.time=this.time-1;
            }else{
              this.disabled=false;
              this.time = 60;
          }
          }, 1000) // 每一秒执行1次
          // 通过$once来监听定时器，在beforeDestroy钩子可以被清除
          this.$once('hook:beforeDestroy',()=>{
            // 在页面销毁时，销毁定时器
            clearInterval(timer)
          })
        },

    },
  }
</script>
<style scoped>
#but{
   text-align: center;
    background-color: #409EFF;
    color: #fff;
}
.item>>>.el-form-item__content{
    margin-left: 0 !important;
}
</style>